<template lang="html">
  <tabbar class="footer" v-if="showFooter">
    <tabbar-item link="/" :selected="footSeclect">
      <img slot="icon" src="../../assets/icon10.png" alt="">
      <img slot="icon-active" src="../../assets/icon11.png" alt="">
      <span slot="label">我要签约</span>
    </tabbar-item>
    <tabbar-item link="/UserCenter" :selected="!footSeclect">
      <img slot="icon" src="../../assets/icon12.png" alt="">
      <img slot="icon-active" src="../../assets/icon13.png" alt="">
      <span slot="label">个人中心</span>
    </tabbar-item>
  </tabbar>
</template>

<script>
import { Tabbar, TabbarItem } from 'vux'
import { mapGetters } from 'vuex'
export default {
  name: 'Footer',
  computed: {
    ...mapGetters({
      showFooter: 'getFooter',
      footSeclect: 'getSelectFooter'
    })
  },
  components: {
    Tabbar,
    TabbarItem
  }
}
</script>

<style lang="css">
  .footer .weui-tabbar__icon{
    width: 32px;
    height: 32px;
  }
  .footer .weui-tabbar__label{
    font-size: 16px;
  }
  .footer .weui-tabbar__item{
    background-color: #ffffff;
  }
  .footer .weui-tabbar__item.weui-bar__item_on{
    background-color: #f5f5f5;
  }
  .footer .weui-tabbar__item.weui-bar__item_on .weui-tabbar__label{
    color:#1773d0;
  }
</style>
